<template>
  <div class="turntable-body">
    <div class="LuckyWheel-box">
      <LuckyWheel
          ref="LuckyWheel"
          width="6rem"
          :blocks="blocks"
          height="6rem"
          :buttons="buttons"
          :prizes="prizes"
          :default-config="defaultConfig"
          :class-option="optionSetting"
          @start="startCallBack"
      />
    </div>
  </div>
</template>

<script>
import {LuckyWheel} from "vue-luck-draw";
import {Dialog} from "vant";
import {mapActions, mapState} from "vuex";

export default {
  components: {LuckyWheel,},
  props: ['luckyInfo'],
  data() {
    return {
      blocks: [
        {
          // padding: "0.5rem",
          imgs: [
            {
              src: require("@/assets/images/lucky/bg_r1.png"),
              width: "100%",
              top: "0",
            },
          ],
        },
      ],
      buttons: [
        {radius: "21%",},
        {
          imgs: [
            {
              src: require("@/assets/images/lucky/but.png"),
              width: "1.64rem",
              // height: "1rem",
              top: "-.85rem",
            },],
        },
      ],
      // prizes: [],
      defaultConfig: {
        gutter: 5,
        accelerationTime: 3000,
        decelerationTime: 2000,
        offsetDegree: 0,
        stopRange: 0.5,
      },
      optionSetting: {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      },
    }
  },
  computed: {
    prizes() {
      let list = []
      let luckyInfoList = this.luckyInfo.list
      if (!luckyInfoList||luckyInfoList.length == 0) return []
      luckyInfoList.map((item, index) => {
        item.name = item.name||'1000 USDT'
        list.push({
          rewardId: item.id,
          fonts: [
            {
              text: item.name.replace(/(USDT)/, ""),
              fontColor: "#fff",
              fontSize: "0.24rem",
              top: "25%",
            },
            {
              text: item.name.includes("USDT") ? "USDT" : "",
              fontColor: "#fff",
              fontSize: "0.2rem",
              top: "42%",
            },
          ],
          // background: "#0081FF",
          imgs: [{src: item.imgUrl, top: "58%", width: "0.68rem"}],
        });
      });
      return list
    }
  },
  methods: {
    startCallBack() {
      if (this.luckyInfo.remainingCount < 1) {
        Dialog.alert({
          message: this.$t("lucky.doc7"),
          showCancelButton: true,
          cancelButtonText: this.$t("page4.doc63"),
          confirmButtonText: this.$t("page.doc98"),
        })
            .then(() => {
              this.$router.push("/my/invite");
            })
            .catch(() => {
            });
        return;
      }
      this.$refs.LuckyWheel.play();
      this.$refs.LuckyWheel.stop(0);
      this.$post(this.URL.lucky.create).then((res) => {
        if(res.code==0){
        setTimeout(() => {
          this.currentPrize = res.data || {};
          this.$set(this.luckyInfo, "remainingCount", res.data.remainingCount);
          this.$store.commit("SET_LUCKY_INFO", res.data);
          this.$router.push('/lucky/go')
          // this.$refs.LuckyWheel.stop();
        }, 1500)
      }else{
        this.$toast(res.message)
      }
      });
    },

  }
}
</script>

<style lang="less" scoped>
.turntable-body {
  margin-top: .2rem;

  .LuckyWheel-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>